<template>
<view>
<image v-if="wap_login_logo" class="cart-image" mode="widthFix" :src="wap_login_logo"></image>
<image v-else class="cart-image" mode="widthFix" src="/static/images/logo3.png"></image>
<view>
    <button open-type="getUserInfo" @getuserinfo="bindGetUserinfo" class="getuse_info">
        <image src="/static/images/wx_logo.png"></image>  
        <view>微信快捷登录</view>
    </button>    
</view>
<!-- 绑定手机号 -->
<view v-if="binding" class="cover-layer">
    <view class="bind-content">
        <view class="bind-tit">绑定手机号，让您的账号更安全，以便我们为您提供更多服务</view>
        <view class="bind-operation">
          <view @tap="cancel">取消</view>
          <button class="btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">立即绑定</button>
        </view>
    </view>
</view>

<view v-if="login_mobile" class="moblie-login" @tap="moblie_login">
  <image src="/static/images/mobile_login.png"></image>
  <view>手机号登录</view>
</view>
</view>
</template>

<script>
var app = getApp();
var request = app.globalData.request;
var common = require("../../../utils/common.js");

export default {
  data() {
    return {
      url: app.globalData.setting.url,
      resourceUrl: app.globalData.setting.resourceUrl,
      requestData: null,
      binding: false,
      // 是否绑定手机号
      login_mobile: false,
      //是否显示验证码登录
      wap_home_logo: '' //商城logo
      ,
      wap_login_logo: "",
      windowWidth: "",
      windowHeight: ""
    };
  },

  components: {},
  props: {},
  onLoad: function () {
    var that = this;
    app.globalData.getConfig(function (res) {
      var is_bind_account = common.getConfigByName(res.config, 'is_bind_account');

      if (is_bind_account == 1) {
        that.setData({
          login_mobile: true
        });
      }

      var wap_login_logo = common.getConfigByName(res.config, 'wap_login_logo');

      if (wap_login_logo) {
        that.setData({
          wap_login_logo: (wap_login_logo.indexOf('http') > 0 ? '' : that.url) + wap_login_logo
        });
      }
    });
    uni.getSystemInfo({
      success(res) {
        that.setData({
          windowWidth: res.windowWidth,
          windowHeight: res.windowHeight
        });
      }

    });
  },
  //返回的时候也可以刷新
  onShow: function () {},
  methods: {
    getPhoneNumber: function (e) {
      this.setData({
        binding: false
      });

      if (e.detail.errMsg == 'getPhoneNumber:ok') {
        var iv = e.detail.iv;
        var code = app.globalData.code;
        var encryptedData = e.detail.encryptedData;
        app.globalData.request.post('/api/user/bindMobile', {
          data: {
            code: code,
            encryptedData: encryptedData,
            iv: iv
          },
          successReload: true,
          isShowLoading: false,
          success: function (res) {
            if (res.data.status == 1) {
              app.globalData.showSuccess('手机号授权成功', function () {
                uni.setStorageSync('isAuth', true);
                uni.setStorageSync('app:userInfo', res.data.result.user);
                app.globalData.userInfo = res.data.result.user;
                app.globalData.userInfo.head_pic = common.getFullUrl(app.globalData.userInfo.head_pic);
                uni.removeStorageSync('bind_third_login');
                uni.navigateBack();
              });
            } else {
              app.globalData.showWarning(res.data.msg);
            }
          }
        });
      } else if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
        app.globalData.showWarning("请绑定手机号");
      }
    },
    bindGetUserinfo: function (res) {
      var that = this;

      if (res.detail.userInfo != undefined) {
        try {
          uni.setStorageSync('wx_user_info', res.detail);
          app.globalData.wechatUser = res.detail.userInfo;
          app.globalData.auth.checkLogin(app.globalData.code, res.detail, function (loginData) {
            if (typeof loginData == 'undefined') {
              that.setData({
                binding: true
              });
            } else {
              app.globalData.showSuccess('登录成功', function () {
                uni.removeStorageSync('first_leader');
                uni.removeStorageSync('unique_id');
                uni.navigateBack();
              });
            }
          });
        } catch (e) {
          console.log(e);
        }
      } else {
        console.log('bindGetUserinfo fail . res.detail.userInfo is undefined');
      }
    },
    // 手机号登录  
    moblie_login: function () {
      uni.navigateTo({
        url: '/pages/user/moblie_login/moblie_login'
      });
    },
    // 取消绑定
    cancel: function () {
      app.globalData.auth.clearAuth();
      this.setData({
        binding: false
      });
    }
  }
};
</script>
<style>
page{
    background-color: #fff;
}
.no-data{
  position: fixed;
  bottom:30%;
}
.container {
    display: flex;
    height: 100%;
    align-items: center;/*垂直居中*/
    justify-content: center;/*水平居中*/
    background-color: #fff;
    padding-bottom: 100rpx;
}
.login-in{
    width: 100%;
    box-sizing: border-box;
}
.order-item{
    display: flex;
    justify-content: space-around;
    height: 200rpx;
    padding: 10rpx 0;
    border-bottom:1px solid #f3f3f3;
}
.goods-ico{
    display: flex;
    align-items: center;
}
.goods-img{
    width: 180rpx;
    height: 180rpx;
    font-size: 0;
    margin-top: 10rpx;
}
.goods-cont{
    position: relative;
    width: 430rpx;
    height: 200rpx;
    font-size: 28rpx;
}
.cart-image{
  width: 300rpx;
  margin: 100rpx 225rpx;
  max-height: 300rpx;
}
.goods-name{
    width: 370rpx;
    height: 64rpx;
    margin: 8rpx 0;
    line-height: 32rpx;
    color: #333;
}
.goods-attribute{
    max-height: 52rpx;
    line-height: 26rpx;
    font-size: 24rpx;
    color:#999;
}
.goods-price{
    height: 40rpx;
    line-height: 40rpx;
    margin-top: 10rpx;
}
.btn-del{
    position: absolute;
    right: 0;
    top:8rpx;
    width: 34rpx;
    height: 34rpx;
}
.count{
    position: absolute;
    right: 0;
    bottom: 5rpx;
    width: 156rpx;
    height: 50rpx;
    border: 1px solid #f3f3f3;
}
.count>view,.count>input{
    float: left;
    width: 50rpx;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
}
.sub{
    border-right: 1px solid #f3f3f3;
}
.add{
    border-left: 1px solid #f3f3f3;
}
.pay-for{
    width: 100%;
    height: 100rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    font-size: 28rpx;
    color: #666;
    background-color:#f0f2f5;
}
.pay-for .pay-btn{
    float: right;
    width: 200rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    background-color: #ff6a00;
    color: #fff;
    border-radius:0;
}
.pay-for .consumer{
    float: right;
    margin-right: 20rpx;
    line-height: 50rpx;  
}
.pay-for .checkbox{
    float: left;
    padding-left: 40rpx;
    line-height: 100rpx;
    display: flex;
    align-items: center;
}
.pay-for .ico-check{
   display: flex;
   align-items: center;
   margin-right: 20rpx;
}
.getuse_info{
  position: fixed;
  bottom:40%;
  left: 70rpx;
  width:610rpx;
  height:90rpx;
  line-height: 90rpx;
  background:linear-gradient(90deg,rgba(4,190,2,1) 0%,rgba(25,217,22,1) 100%);
  color: #fff;
  border-radius: 50rpx;
  font-size: 30rpx ;
  display: flex;
  justify-content: center;
  align-items: center;
}
.getuse_info image{
  width: 48rpx;
  height: 48rpx;
  margin-right: 20rpx;
}
.getuse_info::after{
  content: " ";
  border: none;
} 
.similer{
  margin: 0 auto;
  margin-top: 20px;
  width: 60%;
  height: 64rpx;
  line-height: 64rpx;
  font-size: 28rpx;
  border-radius: 8rpx;
  border: 1px solid #f3f3f3;
}

.moblie-login{
  position: fixed;
  bottom: 14%;
  text-align: Center;
  font-size: 24rpx;
  color: #999;
  width: 150rpx;
  margin-left: 300rpx;
}
.moblie-login image{
  width: 64rpx;
  height: 64rpx;
  margin-bottom: 10rpx;
}
.cover-layer{
  background: rgba(0,0,0,0.6);
}

</style>